<template>
  <div id="app">

    <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="80px">
      <el-form-item label="用户名:" prop="username">
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.prevent="login">登录</el-button>
        <el-button @click="cancelLogin">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login" ,
  data(){
    return {
      loginForm:{
        username:'',
        password:''
      },
      loginFormRules:{
        username:[
          {required:true,message:'用户名不能为空',trigger:'blur'}
        ],
        password:[
          {required:true,message:'密码不能为空',trigger:'blur'}
        ]
      }
    }
  },
  methods:{
    login(){
        this.$refs.loginFormRef.validate((valid)=>{
          if (!valid) return ;
          //alert('登录成功!');
          let url = "/manager/login" ;
          this.$axios.get(url,{
            params:{
              username:this.loginForm.username ,
              password:this.loginForm.password
            }
          }).then((res)=>{
            if (res.data.code == 200) {
              this.$message({
                type:'success',
                message:res.data.msg,
                duration:1000
              })
              //获取 token
              let token = res.data.token ;
              console.log(token)
              //存储token
              sessionStorage.setItem("token",token) ;
              //跳转到 员工组件
              this.$router.push("Emp")
            }else {
              this.$message({
                type:'error',
                message:res.data.msg,
                duration:1000
              })
            }
          })
        });
    },
    cancelLogin(){
      this.$refs.loginFormRef.resetFields();
    }
  }

}
</script>

<style scoped>
    #app {
      width: 30%;
      margin: 150px auto;
      border: 1px solid #CCC;
      border-radius: 10px ;
      height: 300px;
      padding: 50px;
    }
</style>